<template>
	<el-dialog :visible.sync="dialogVisible" title="请选择商品" width="1400px" :close-on-click-modal="false" append-to-body v-drag2anywhere>
		<!--搜索过滤-->
		<el-form :model="filterData" ref="filterForm" size="mini">
			<el-row :gutter="10">
				<el-col style="width: 250px;">
					<el-form-item label="商品渠道:" label-width="80px">
						<el-select v-model="filterData.platform" :disabled="lockPlatform"  clearable>
							<el-option v-for="(item,index) in platforms" :key="item.id" :value="item.label"
								:label="item.label"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
        <el-col style="width: 250px;">
        	<el-form-item label="商品编码:" label-width="80px">
        		<el-input placeholder="商品编码" v-model="filterData.sn" clearable></el-input>
        	</el-form-item>
        </el-col>

        <el-col style="width: 250px;">
					<el-form-item label="商品名称:" label-width="80px">
						<el-input placeholder="商品名称,规格" v-model="filterData.title" clearable></el-input>
					</el-form-item>
				</el-col>

        <el-col style="width: 200px;" >
        	<el-form-item label="型号:" label-width="60px">
        		<el-input placeholder="规格型号" v-model="filterData.model" clearable></el-input>
        	</el-form-item>
        </el-col>
        <el-col style="width: 200px;" >
        	<el-form-item label="品牌:" label-width="60px">
        		<el-input placeholder="品牌" v-model="filterData.brand" clearable></el-input>
        	</el-form-item>
        </el-col>

				<el-col style="width: 300px;" v-if="false">
					<el-form-item label="价格:" label-width="80px">
						<el-input placeholder="低" style="width: 90px;" v-model="filterData.lprice" clearable></el-input>
						-
						<el-input placeholder="高" style="width: 90px;" v-model="filterData.hprice" clearable></el-input>
					</el-form-item>
				</el-col>
				<el-col style="width: 260px;">
					<el-form-item label="排序:" label-width="60px">
						<el-radio-group v-model="filterData.sorttype" size="mini" @change="handleSortChanged">
							<el-radio-button label="默认">默认</el-radio-button>
							<el-radio-button label="降序">降序</el-radio-button>
							<el-radio-button label="升序">升序</el-radio-button>
						</el-radio-group>
					</el-form-item>
				</el-col>
				<el-button type="primary" icon="el-icon-search" @click="curpage=1;loadDataList()">搜索</el-button>
			</el-row>
			<div style="height: 2px; border-bottom: 1px solid #EEEEEE;"></div>
		</el-form>

		<el-table ref="tableData" :data="tableData" border style="height: 400px; overflow-y: auto;"
			:header-cell-style="{background:'#f3f8ff'}">
			<el-table-column type="index" label="序号" width="50px" align="center"></el-table-column>
			<el-table-column type="selection" width="50px" align="center"></el-table-column>
			<el-table-column prop="id" label="id" v-if="false"></el-table-column>
			<el-table-column prop="cover" label="图片" width="45" align="center">
				<template v-slot="scope" style="text-align: center;">
					<div style="width: 25px; height:25px; background-color: #EEEEEE;">
						<img :src="scope.row.cover" style="width: 100%;" fit="cover" />
					</div>
				</template>
			</el-table-column>
			<el-table-column prop="platform" label="渠道名称" width="120" show-overflow-tooltip align="center"></el-table-column>
			<el-table-column prop="sn" label="商品编码" width="150" show-overflow-tooltip>
				<template v-slot="scope">
					<span>{{scope.row.sn}}</span>
				</template>
			</el-table-column>
      <el-table-column prop="title" label="商品名称" style="width: 100px;" show-overflow-tooltip></el-table-column>
      <el-table-column prop="brand" label="品牌" width="90px" show-overflow-tooltip></el-table-column>
      <el-table-column prop="model" label="型号" width="120px" show-overflow-tooltip></el-table-column>
      <el-table-column prop="unit" label="单位" show-overflow-tooltip width="80" align="center"></el-table-column>
			<el-table-column prop="price" label="单价" width="80" align="center"></el-table-column>
      <el-table-column prop="supname" label="合作商" align="center" show-overflow-tooltip></el-table-column>
    </el-table>

		<div style="margin-top: 10px; text-align:left; ">
			<el-pagination class="pagination" prev-text="上一页" next-text="下一页" background
				layout=" prev, pager, next,sizes,total" :page-sizes="[15, 40, 50]" :total="total" :page-size="pagesize"
				:current-page="curpage" @size-change="handleSizeChange" @current-change="handleCurrentChange">
			</el-pagination>
		</div>
		<div slot="footer" class="dialog-footer">
			<el-button @click="dialogVisible = false" size="medium">取 消</el-button>
			<el-button type="primary" size="medium" @click="handleSelection">确 定</el-button>
		</div>
	</el-dialog>
</template>

<script>
	export default {
		data() {
			return {
				dialogVisible: false,
				curpage: 1,
				pagesize: 12,
				total: 1,
				lockPlatform:false,
				filterData: {
					sn: '',
					title: '',
					sorttype: "默认",
					hprice: '',
					lprice: '',
					platform: '全部'
				},
				tableData: [],
				platforms: [],
			}
		},
		methods: {
			initPlatform: function(platformid,platform,locked) {
				this.lockPlatform=locked;
				this.tableData = [];
				this.filterData = {
					sn: '',
					title: '',
					sorttype: "默认",
					hprice: '',
					lprice: '',
					platform:platform,
					platformid:platformid==-1? -1: platformid
				};

				this.loadDataList();
				this.loadPlatforms();
			},
			init: function() {
				this.lockPlatform=false;
				this.tableData = [];
				this.filterData = {
					sn: '',
					title: '',
					sorttype: "默认",
					hprice: '',
					lprice: '',
					platform: '全部'
				};
				//this.filterForm.resetFields();
				this.loadDataList();
				this.loadPlatforms();
			},
			loadPlatforms: function() {
				this.axios.post("/api/admin/platform/list").then(res => {
				  if (res.status == 200 && res.data.code == 0) {
				    this.platforms = res.data.platforms;
				  }
				})
			},
			openlink: function(index, row) {
				window.open("https://item.jd.com/" + row.sn + ".html");
			},
			handleSizeChange: function(val) {
				this.pagesize = val;
				this.curpage = 1;
				this.loadDataList();
			},
			handleCurrentChange: function(val) {
				this.curpage = val;
				this.loadDataList();
			},
			loadDataList: function() {
				let params = {
					platform: this.filterData.platform == "全部" ? '' : this.filterData.platform,
					sn: this.filterData.sn,
          brand:this.filterData.brand,
					title: this.filterData.title,
					sorttype: this.filterData.sorttype == "降序" ? "desc" : "asc",
					hprice: this.filterData.hprice,
					lprice: this.filterData.lprice,
					curpage: this.curpage,
					pagesize: this.pagesize
				}
				this.axios.post("/api/admin/product/filter", params).then((res) => {
					if (res.status == 200 && res.data.code == 0) {
						this.tableData = res.data.list;
						this.curpage = res.data.curpage;
						this.total = res.data.total;
						this.pagesize = res.data.pagesize;
					}
				})
			},
			handleSortChanged: function(v) {
				this.filterData.sorttype = v;
				//this.curpage=1;
				this.loadDataList();
			},
			handleSelection: function(selection) {
				this.dialogVisible = false;
				this.$emit("selectHandler", this.$refs.tableData.selection);
			}
		}

	}
</script>

<style>
</style>
